<template>
  <div class="drill">
    <!-- 上方的卡片 -->
    <div class="top">
      <el-card>
        <!-- 创建数据集 -->
        <div class="button">
          <el-button type="primary" @click="beginCreate">新建数据集</el-button>
        </div>

        <div class="buttonRight">
          <div class="select">
            <div class="text">数据集类型:</div>
            <el-select v-model="form.gather">
              <el-option
                v-for="(item, index) in gatherList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>

          <div class="select">
            <div class="text">基础模型:</div>

            <el-select v-model="form.model">
              <el-option
                v-for="(item, index) in modelList2"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>

          <div class="input">
            <el-input
              v-model="search"
              style="width: 400px"
              placeholder="请输入数据集名称..."
            >
              <template #suffix>
                <img src="../../assets/image/放大镜.svg" alt="" /> </template
            ></el-input>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 下边的数据集 -->
    <div class="down">
      <el-card class="allDataCard">
        <div class="tableTop">
          <img src="../../assets/../assets/image/数据集.png" alt="" />

          <div class="text">已有数据集列表</div>
        </div>

        <div class="downTable">
          <el-table
            :data="filterTableData"
            class-name="elTable"
            :header-cell-style="headerCellStyle"
            style="height: 100%"
          >
            <template #empty>
              <el-empty description="暂无数据" :image-size="100" />
            </template>
            <el-table-column
              class-name="eltableColumn"
              label="数据集名称"
              prop="name"
            />

            <el-table-column
              class-name="eltableColumn"
              label="数据集类型"
              prop="type"
            />
            <el-table-column
              class-name="eltableColumn"
              label="基础模型"
              prop="image_name"
            />
            <el-table-column
              class-name="eltableColumn"
              label="数据集标签"
              prop="tag"
            />
            <el-table-column
              class-name="eltableColumn"
              label="使用次数"
              prop="num_uses"
            />
            <el-table-column
              class-name="eltableColumn"
              label="创建时间"
              prop="created_time"
            />
            <el-table-column align="right">
              <template #default="scope">
                <el-button
                  size="small"
                  round
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                  >训练</el-button
                >
                <el-button
                  size="small"
                  round
                  @click="handleUpload(scope.$index, scope.row)"
                  >下载</el-button
                >

                <el-button
                  size="small"
                  round
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 编辑回显的弹窗 -->
          <el-dialog v-model="dialogVisible">
            <el-form :model="editingRowData">
              <el-form-item label="模型名称">
                <el-input v-model="editingRowData.container_name" />
              </el-form-item>
            </el-form>
            <div slot="footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="nameChange()">确认</el-button>
            </div>
          </el-dialog>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {
  ElCard,
  ElDialog,
  ElInput,
  ElTable,
  ElTableColumn,
  ElButton,
  ElEmpty,
  ElMessageBox,
  ElMessage,
  ElForm,
  ElFormItem,
  ElSelect,
  ElOption
} from 'element-plus'
import { reactive, ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

import { getGather } from '../../api/gather.js'
import { getGpu } from '../../api/server.js'
import { listDeploy } from '../../api/model.js'

const router = useRouter()

const modelList = ref(['LangPost6'])
const gatherList = ref(['LangPost6'])
const modelList2 = ref(['LangPost6'])

const form = reactive({
  gather: '全部',
  model: '全部'
})
const isCreate = ref(false)

const search = ref('')
const editingRowData = ref({})
const dialogVisible = ref(false) // 编辑回显时的弹窗
let editIndex = -1 // 表示没有编辑的行
let tableData = reactive([
  {
    creat_time: '2023-05-03',
    container_name: 'Tom',
    image_name: 'https://mirrors.aliyun.com/'
  },
  {
    creat_time: '2023-05-02',
    container_name: 'John',
    image_name: 'http://mirrors.163.com/'
  },
  {
    creat_time: '2023-05-04',
    container_name: 'Morgan',
    image_name: 'https://mirrors.hust.edu.cn/'
  },
  {
    creat_time: '2023-05-01',
    container_name: 'Jessy',
    image_name: 'https://npm.taobao.org/'
  }
])

// 更改el-table行头样式
const headerCellStyle = () => {
  return {
    backgroundColor: '#f6f6f6'
  }
}

// 点击编辑
const handleEdit = (index, row) => {
  editIndex = index
  editingRowData.value = { ...row }
  dialogVisible.value = true
}
//
const handleUpdate = () => {
  if (editIndex !== -1) {
    tableData.splice(editIndex, 1, { ...editingRowData })
    dialogVisible.value = false
    // tableData.value = editingRowData.value  直接赋值会失败,因为直接赋值只是赋值,而这里需要一个对象
    tableData[editIndex] = Object.assign({}, editingRowData.value)

    ElMessage({
      type: 'success',
      message: '恭喜你训练成功 快去部署数据吧'
    })
  } else {
    ElMessage({
      type: 'error',
      message: '修改失败!'
    })
  }
}

// 点击新建数据集
const beginCreate = () => {
  router.push('./createGather')
}

// 搜索功能
const filterTableData = computed(function () {
  return tableData.filter(function (data) {
    return (
      !search.value ||
      data.container_name.toLowerCase().includes(search.value.toLowerCase())
    )
  })
})

const handleDelete = (index, row) => {
  ElMessageBox.confirm(`您确定要删除模型名称为${row.name}的数据吗?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      tableData.splice(index, 1)
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {})
}

async function fetchData () {
  try {
    // await getGpu({ server_ip: 'localhost' }).then(res => {
    await getGather().then(res => {
      console.log('数据集列表的res', res)
      tableData.length = 0 // 清空tableData数组
      tableData.push(...res.data) // 将返回的数据添加到tableData数组中
      tableData = tableData.map(item => {
        return { ...item, image_name: 'langport' }
      })

      console.log('数据集列表的tableData', tableData)
    })
  } catch (error) {
    console.error('从后台拿现有模型列表失败', error)
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style lang="less" scoped>
.drill {
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  .top {
    padding: 20px 35px 20px 35px;

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .buttonRight {
      width: 70%;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;

      .select {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        .text {
          font-weight: 540;
          font-size: 15px;
          padding-right: 7px;
          color: #282828;

          .custom-option {
            font-size: 12px; /* 自定义文字大小 */
          }
        }
      }

      .input {
        width: 40%;

        img {
          width: 17px;
          height: 17px;
        }
      }

      .text {
        font-size: 22px;
        font-weight: bold;
      }
    }
  }

  .down {
    padding: 0 35px 0 35px;

    :deep(.el-card__body) {
      width: 100%;
      height: 400px;
    }

    .tableTop {
      font-weight: bold;
      display: flex;
      justify-content: center;

      align-items: center;
      height: 40px;

      img {
        width: 70px;
        height: 70px;
      }
      .text {
        font-size: 22px;
        font-weight: bold;
        margin: 10px 0 0 20px;
      }
    }

    .downTable {
      height: 500px;
      width: 100%;
      position: relative;
      img {
        width: 20px;
        height: 20px;
      }
      .elTable {
        position: absolute;
        top: 10%;
        :deep(.eltableColumn) {
          color: black;
          text-align: center;
          height: 60px;
        }
      }
    }
  }
  :deep(.allDataCard) {
    width: 100%;
    height: 520px;
  }

  :deep(.el-popup-parent--hidden) {
    width: 100%;
  }
}
</style>
